<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>预览代码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link rel="shortcut icon" th:href="@{/static/assets/logo.png}" type="image/x-icon"/>
    <link th:href="@{/static/assets/layui/css/layui.css}" rel="stylesheet" media="all"/>
    <link th:href="@{/static/assets/fly/css/fly-ui.css}" rel="stylesheet" media="all"/>
    <script type="text/javascript" th:src="@{/static/assets/fly.js}"></script>
    <script type="text/javascript" th:src="@{/static/assets/fly/jquery-3.6.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/assets/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/static/assets/fly/js/spark-md5.js}"></script>
    <script type="text/javascript" th:src="@{/assets/fly/js/fly-config.js}"></script>
    <script type="text/javascript" th:src="@{/assets/fly/js/fly-ui.js}"></script>
    <link th:href="@{/assets/highlight/styles/default.min.css}" rel="stylesheet" media="all"/>
    <script th:src="@{/assets/highlight/highlight.min.js}" charset="utf-8"></script>

    <style>
        .code-b {
            background: -webkit-linear-gradient(top right, #3fa4d6, #3cbecb, #37c5c0, #33d5b5);
        }

        .xml-code {
            padding: 15px;
        }

    </style>

    <script>

        const path = HTTP_BIZ_URI + "/dev/table/info";

        layui.use(['form'], function () {
            let form = layui.form;
            form.render();

            let id = $("#id").val();
            $.ajax({
                url: path + '/preview/' + id,
                success: function (res) {
                    if (200 === res.status) {
                        let data = res.data;
                        let index = 0;
                        let key, value, o, code, tabTitleHtml, tabContentHtml
                        for (let item in data) {
                            key = item.substring(item.lastIndexOf('/') + 1, item.indexOf('.vm'));
                            value = data[item]
                            o = key.replace('.vm', '');
                            code = o.substring(o.lastIndexOf('.') + 1);

                            tabTitleHtml = '<li class="layui-this">' + key + '</li>';
                            tabContentHtml = '<div class="layui-tab-item layui-show"><pre>';
                            if (0 < index) {
                                tabTitleHtml = '<li>' + key + '</li>';
                                tabContentHtml = '<div class="layui-tab-item"><pre>';
                            }
                            if ('html' === code || 'xml' === code  || 'vue' === code) {
                                tabContentHtml += '<xmp class="' + code + ' code-b xml-code">' + value + '</xmp>'
                            } else {
                                tabContentHtml += '<code class="' + code + ' code-b">' + value + '</code>'
                            }
                            tabContentHtml += '</pre></dev>'

                            $('#tabTitle').append(tabTitleHtml)
                            $('#tabContent').append(tabContentHtml)
                            index++;
                        }
                        hljs.initHighlightingOnLoad();
                    } else {
                        layer.alert('获取代码失败', {title: "系统提示", icon: 2});
                    }
                }
            })
        });
    </script>
</head>
<body class="bg-color">
<input type="text" th:value="*{id}" id="id" name="id" style="display: none">
<div class="body_info">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title" id="tabTitle">
        </ul>
        <div class="layui-tab-content" id="tabContent">
        </div>
    </div>
</div>
</body>
</html>